<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo">
        <img src="@/assets/img/main/logo.png" alt="logo" />
      </div>
      <a-menu theme="dark" mode="inline" :selected-keys="[selectedKey]" @click="handleMenuClick">
        <a-menu-item key="home">
          <a-icon type="home" />
          <span>工作台</span>
        </a-menu-item>
        <a-sub-menu key="contribution">
          <span slot="title">
            <a-icon type="file-text" />
            <span>投稿管理</span>
          </span>
          <a-menu-item key="contribution-list">
            <span>投稿记录管理</span>
          </a-menu-item>
          <a-menu-item key="contribution-add">
            <span>新增投稿</span>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="report" v-if="isAdmin || isAudit">
          <span slot="title">
            <a-icon type="bar-chart" />
            <span>报表管理</span>
          </span>
          <a-menu-item key="import-extra-data">
            <span>视频平台数据导入</span>
          </a-menu-item>
          <a-menu-item key="score-extra-data">
            <span>根据平台数据打分</span>
          </a-menu-item>
          <a-menu-item key="import-calculate">
            <span>报表计算</span>
          </a-menu-item>
        </a-sub-menu>
        <template v-if="isAdmin">
          <a-menu-item key="score-rule">
            <a-icon type="calculator" />
            <span>打分规则管理</span>
          </a-menu-item>
          <a-menu-item key="department" v-show="false">
            <a-icon type="apartment" />
            <span>部门管理</span>
          </a-menu-item>
          <a-menu-item key="person" v-show="false">
            <a-icon type="user" />
            <span>人员管理</span>
          </a-menu-item>
          <a-menu-item key="project-team">
            <a-icon type="team" />
            <span>项目组管理</span>
          </a-menu-item>
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <div class="header-right">
          <a-dropdown>
            <a class="ant-dropdown-link" @click.prevent>
              <a-icon type="user" /> {{ userInfo.person_name || '未登录' }}
              <a-icon type="down" />
            </a>
            <!-- <a-menu slot="overlay">
              <a-menu-item key="1" @click="handleChangePassword">
                <a-icon type="lock" />修改密码
              </a-menu-item>
              <a-menu-item key="2" @click="handleLogout">
                <a-icon type="logout" />退出登录
              </a-menu-item>
            </a-menu> -->
          </a-dropdown>
        </div>
        <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)" />
        <a-tooltip class="url-item">
          <template slot="title">
            排行榜
          </template>
          <a-button @click="navigateToNewTab" type="primary" shape="round" icon="bar-chart">排行榜</a-button>
        </a-tooltip>
      </a-layout-header>
      <a-layout-content
        :style="{ margin: '24px 16px', padding: '16px', background: '#fff', minHeight: 'calc(100vh - 64px - 48px)',overflowY: 'auto'}">
        <router-view />
      </a-layout-content>
    </a-layout>
    <change-password ref="changePasswordModal" />
  </a-layout>
</template>

<script>
  import ChangePassword from './components/ChangePassword.vue'

  export default {
    name: 'Main',
    components: {
      ChangePassword
    },
    data() {
      return {
        collapsed: false,
        selectedKey: '',
        userInfo: {}
      }
    },
    computed: {
      isAdmin() {
        return this.userInfo.role === '系统管理员'
      },
      isAudit() {
        return this.userInfo.role === '审核员'
      }
    },
    watch: {
      $route: {
        immediate: true,
        handler(route) {
          const menuKeyMap = {
            '/main/home': 'home',
            '/main/department': 'department',
            '/main/person-mgr': 'person',
            '/main/project-team': 'project-team',
            '/main/score-rule': 'score-rule',
            '/main/contribution-list': 'contribution-list',
            '/main/contribution-add': 'contribution-add',
            '/main/import-extra-data': 'import-extra-data',
            '/main/score-extra-data': 'score-extra-data',
            '/main/import-calculate': 'import-calculate',
          }
          this.selectedKey = menuKeyMap[route.path] || ''
        }
      }
    },
    mounted() {
      // 获取用户信息
      const personInfo = window.sessionStorage.getItem('person_info')
      if (personInfo) {
        this.userInfo = JSON.parse(personInfo)
      }
    },
    methods: {
      handleMenuClick({
        key
      }) {
        const path = {
          'home': '/main/home',
          'department': '/main/department',
          'person': '/main/person-mgr',
          'project-team': '/main/project-team',
          'score-rule': '/main/score-rule',
          'contribution-list': '/main/contribution-list',
          'contribution-add': '/main/contribution-add',
          'import-extra-data': '/main/import-extra-data',
          'score-extra-data': '/main/score-extra-data',
          'import-calculate': '/main/import-calculate'
        } [key]

        if (path && path !== this.$route.path) {
          this.$router.push(path).catch(err => {
            if (err.name !== 'NavigationDuplicated') {
              console.error('导航错误:', err)
            }
          })
        }
      },
      handleChangePassword() {
        this.$refs.changePasswordModal.showModal()
      },
      handleLogout() {
        this.$confirm({
          title: '确认退出',
          content: '确定要退出登录吗？',
          onOk: () => {
            window.sessionStorage.clear()
            window.localStorage.removeItem('password')
            this.$router.push('/login')
          }
        })
      },
      navigateToNewTab() {
        const routeData = this.$router.resolve({
          path: '/statistic-page'
        });
        window.open(routeData.href, '_blank');
      }
    }
  }
</script>

<style scoped>
  #components-layout-demo-custom-trigger {
    height: 100vh;
  }

  #components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
  }

  #components-layout-demo-custom-trigger .trigger:hover {
    color: #1890ff;
  }

  .logo {
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #001529;
  }

  .logo img {
    height: 32px;
  }

  .header-right {
    float: right;
    margin-right: 24px;
  }

  .ant-dropdown-link {
    color: rgba(0, 0, 0, 0.65);
  }

  .ant-dropdown-link:hover {
    color: #1890ff;
  }
</style>